<template>
  <div>
    <common-table
        :componentSetOptions="componentSetOptions"
        @pageCurrentClick="pageCurrentClick"
    />
  </div>
</template>

<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      componentSetOptions: {
        loading:false,//加载中 true  加载完成false
        expand:true,//是否是箭头点击
        //箭头后面的数据导入自定义组件
        expandArray:{
          componentName:'TestTableAb',//组件名称
          ref:'213',//ref名称
        },
        children:'children',//children字段名
        class: '',//表格顶部div class
        index: true,//是否需要有序号
        selection: true,//是否是多选框
        selectionVal: 'id',// 开启多选获取的字段
        selectionId: [],// 开启多选后，选择哪几条
        isPage: true, //是否分页
        current_page: 2,//单前第几页
        pageSize: 20,//一页数量
        pageMethod: 'pageCurrent',//分页方法 自动加Click
        pageTotal: 100,//分页总数
        statusName: 'status',//状态字段名 已启动未启动等状态按钮显示还是隐藏
        //字段配置
        tableListProp: [
          {
            show: true,//是否显示 true 显示 false 不显示
            headerAlign: 'center',//表头居中
            align: 'center',//内容居中
            isWidth: true,//是否是固定长度 true 是 false 否
            width: '150',//长度
            tooltip: true,//是否超长tip
            class: 'chineseCharactersNoJson',//表格class
            title: '显示汉字不在json里面',//表头
            field: 'chineseCharactersNoJson',//字段
            type: 'chineseCharacters',
          }, {
            show: true,//是否显示 true 显示 false 不显示
            headerAlign: 'center',//表头居中
            align: 'center',//内容居中
            isWidth: false,//是否是固定长度 true 是 false 否
            width: '150',//长度
            tooltip: true,//是否超长tip
            class: 'chineseCharactersJson',//表格class
            title: '显示汉字在json里面',//表头
            field: 'name',//字段
            type: 'chineseCharactersJson',
            jsonName: 'chineseCharactersJson'//是json里面的字段
          }, {
            show: true,//是否显示 true 显示 false 不显示
            headerAlign: 'center',//表头居中
            align: 'center',//内容居中
            isWidth: false,//是否是固定长度 true 是 false 否
            width: '300',//长度
            tooltip: false,//是否超长tip
            class: 'imagesNoJson',//表格class
            title: '显示图片不在json里面',//表头
            field: 'imagesNoJson',//字段
            type: 'images',
            urlType: 'pc_url',//使用那种格式的图片 mobile_url:手机图片 pc_url:pc图片 url:原生大小
            imageWidth:'60',//图片多度
            imageHeight:'',//图片高度
          },{
            show: true,//是否显示 true 显示 false 不显示
            headerAlign: 'center',//表头居中
            align: 'center',//内容居中
            isWidth: false,//是否是固定长度 true 是 false 否
            width: '150',//长度
            tooltip: false,//是否超长tip
            class: 'imagesJson',//表格class
            title: '显示图片在json里面',//表头
            field: 'name',//字段
            type: 'imagesJson',
            urlType: 'pc_url',//使用那种格式的图片 mobile_url:手机图片 pc_url:pc图片 url:原生大小
            jsonName: 'imagesJson',//是json里面的字段
            imageWidth:'60',//图片多度
            imageHeight:'',//图片高度
          }, {
            show: true,//是否显示 true 显示 false 不显示
            headerAlign: 'center',//表头居中
            align: 'center',//内容居中
            isWidth: false,//是否是固定长度 true 是 false 否
            width: '150',//长度
            tooltip: false,//是否超长tip
            class: 'fileNoJson',//表格class
            title: '显示文件不在json里面',//表头
            field: 'fileNoJson',//字段
            type: 'file',
          }, {
            show: true,//是否显示 true 显示 false 不显示
            headerAlign: 'center',//表头居中
            align: 'center',//内容居中
            isWidth: false,//是否是固定长度 true 是 false 否
            width: '150',//长度
            tooltip: false,//是否超长tip
            class: 'fileJson',//表格class
            title: '显示文件在json里面',//表头
            field: 'name',//字段
            type: 'fileJson',
            jsonName: 'fileJson',//是json里面的字段
          }, {
            show: true,//是否显示 true 显示 false 不显示
            headerAlign: 'center',//表头居中
            align: 'center',//内容居中
            isWidth: false,//是否是固定长度 true 是 false 否
            width: '150',//长度
            tooltip: false,//是否超长tip
            class: 'timeStampNOJson',//表格class
            title: '时间戳不在json里面',//表头
            field: 'timeStampNoJson',//字段
            type: 'timeStamp',
            jsonName: '',//是json里面的字段
            timeType: true,//显示时间是否到时分秒 true 是 false 没有时分秒就一个日期
          },{
            show: true,//是否显示 true 显示 false 不显示
            headerAlign: 'center',//表头居中
            align: 'center',//内容居中
            isWidth: false,//是否是固定长度 true 是 false 否
            width: '150',//长度
            tooltip: false,//是否超长tip
            class: 'timeStampJson',//表格class
            title: '时间戳在json里面',//表头
            field: 'name',//字段
            type: 'timeStampJson',
            jsonName: 'timeStampJson',//是json里面的字段
            timeType: false,//显示时间是否到时分秒 true 是 false 没有时分秒就一个日期
          },{
            show: true,//是否显示 true 显示 false 不显示
            headerAlign: 'center',//表头居中
            align: 'center',//内容居中
            isWidth: true,//是否是固定长度 true 是 false 否
            width: '150',//长度
            tooltip: true,//是否超长tip
            class: '',//表格class
            title: '图标标签',//表头
            field: 'icon',//字段
            type: 'icon',//显示图标标签
          },
          {
            show: true,//是否显示 true 显示 false 不显示
            title: '过滤器',//表头
            field: 'a121',//字段
            isWidth: false,//是否是固定长度 true 是 false 否
            width: '120',//长度
            headerAlign: 'center',//表头居中
            align: 'center',//内容居中
            tooltip: true,//是否超长tip
            class: '',//表格class
            type: 'filter',
            prop: [
              {label: "待使用-待派单", value:1},
              {label: "待使用-待配送", value:2},
              {label: "待使用-配送中", value:3},
              {label: "使用中", value:4},
              {label: "待归还-待派单", value:5},
              {label: "待归还-待收回", value:6},
              {label: "已归还-收回中", value:7},
              {label: "已收回", value:8},
              {label: "已取消", value:9},
            ]
          },
         /* {
            show: true,//是否显示 true 显示 false 不显示
            headerAlign: 'center',//表头居中
            align: 'center',//内容居中
            isWidth: false,//是否是固定长度 true 是 false 否
            width: '150',//长度
            tooltip: false,//是否超长tip
            class: 'custom',//表格class
            title: '自定义组件',//表头
            field: 'custom',//字段
            type: 'custom',
            ref: 'treeFather',//table组件里面的ref 拿到就可以拿到子组件的ref
            moduleName: 'CommonTextTable',//组件名称
            classForm: '',//form组件class
          },*/
          {
            show: true,//是否显示 true 显示 false 不显示
            headerAlign: 'center',//表头居中
            align: 'center',//内容居中
            isWidth: false,//是否是固定长度 true 是 false 否
            width: '150',//长度
            tooltip: false,//是否超长tip
            class: 'timeStampJson',//表格class
            title: '操作',//表头
            type: 'operation',
          }
        ],
        //操作配置
        operate: [
          { //按钮集合
            name: '按钮1',//按钮名称
            type: 'success',//按钮颜色 primary success info warning danger text
            icon: '', //图标
            plain: false,// 是否朴素按钮 false 否 true 是
            round: false, // 是否圆角 false 否 true 是
            method: 'but1', //按钮方法
            id: "20000",//权限 20000 默认显示
            status: '1,0',//状态值
          }, { //按钮集合
            name: '按钮2',//按钮名称
            type: 'info',//按钮颜色 primary success info warning danger text
            icon: '', //图标
            plain: false,// 是否朴素按钮 false 否 true 是
            round: false, // 是否圆角 false 否 true 是
            method: 'but2', //按钮方法
            id: "20000",//权限 20000 默认显示
            status: '2',//状态值 20000什么状态都显示
          },
          { //按钮集合
            name: '按钮3',//按钮名称
            type: 'info',//按钮颜色 primary success info warning danger text
            icon: '', //图标
            plain: false,// 是否朴素按钮 false 否 true 是
            round: false, // 是否圆角 false 否 true 是
            method: 'but2', //按钮方法
            id: "20000",//权限 20000 默认显示
            status: '20000',//状态值 20000什么状态都显示
            noField:'id', //判断按钮不显示字段 字段的值不等于什么就不显示
            noType:'2',//判断按钮不等于说明值时候显示  如 id!=2时候显示
          }, { //按钮集合
            name: '按钮4',//按钮名称
            type: 'info',//按钮颜色 primary success info warning danger text
            icon: '', //图标
            plain: false,// 是否朴素按钮 false 否 true 是
            round: false, // 是否圆角 false 否 true 是
            method: 'but2', //按钮方法
            id: "20000",//权限 20000 默认显示
            status: '20000',//状态值 20000什么状态都显示

          }],
        //table 数据
        tableData: [
          {
            a121:1,//过滤器
            id:1,
            //只显示汉字不在json
            chineseCharactersNoJson:'只显示汉字不在json',
            //只显示汉字在json
            chineseCharactersJson:{
              name:'只显示汉字在json',
            },
            //显示图片不在json里面
            imagesNoJson: JSON.stringify([{
              url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj.jpeg",
              mobile_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_150.jpeg",
              pc_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_800.jpeg",
              name: "33.jpg"
            }, {
              url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj.jpeg",
              mobile_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_150.jpeg",
              pc_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_800.jpeg",
              name: "33.jpg"
            }
            ]),
            //显示图片在json里面
            imagesJson:{
              name: JSON.stringify([{
                url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj.jpeg",
                mobile_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_150.jpeg",
                pc_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_800.jpeg",
                name: "33.jpg"
              }, {
                url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj.jpeg",
                mobile_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_150.jpeg",
                pc_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_800.jpeg",
                name: "33.jpg"
              }
              ])
            },
            //显示文件不在json里面
            fileNoJson:JSON.stringify([{
              name: "111.ppt",
              "url": "http://common.hc-info.cn/storage/file/yCVZUAXwKjEef2639t1g5IczDBFmoI3s5qA7WnPv.ppt"
            }, {
              "name": "112112.xls",
              "url": "http://common.hc-info.cn/storage/file/FBhXGpWbTAqcpCoQjSiAgIAKKOvg5zgls1wSMpq7.xls"
            }]),
            //显示文件在json里面
            fileJson:{
              name:JSON.stringify([{
                name: "111.ppt",
                "url": "http://common.hc-info.cn/storage/file/yCVZUAXwKjEef2639t1g5IczDBFmoI3s5qA7WnPv.ppt"
              }, {
                "name": "112.xls",
                "url": "http://common.hc-info.cn/storage/file/FBhXGpWbTAqcpCoQjSiAgIAKKOvg5zgls1wSMpq7.xls"
              }])
            },
            //显示时间戳不在json里面
            timeStampNoJson:'1627959191',
            //显示时间戳在json里面
            timeStampJson:{name:'1627959191'},
            aa: '',//自定义组件
            status: '1',//状态
            icon:'el-icon-share',//图标标签
          },
          {id:2,
            a121:2,//过滤器
            icon:'el-icon-share',//图标标签
            //只显示汉字不在json
            chineseCharactersNoJson:'只显示汉字不在json',
            //只显示汉字在json
            chineseCharactersJson:{
              name:'只显示汉字在json',
            },
            //显示图片不在json里面
            imagesNoJson: JSON.stringify([{
              url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj.jpeg",
              mobile_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_150.jpeg",
              pc_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_800.jpeg",
              name: "33.jpg"
            }, {
              url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj.jpeg",
              mobile_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_150.jpeg",
              pc_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_800.jpeg",
              name: "33.jpg"
            }
            ]),
            //显示图片在json里面
            imagesJson:{
              name: JSON.stringify([{
                url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj.jpeg",
                mobile_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_150.jpeg",
                pc_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_800.jpeg",
                name: "33.jpg"
              }, {
                url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj.jpeg",
                mobile_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_150.jpeg",
                pc_url: "http://common.hc-info.cn/storage/image/9crpozlm6nZriTS6VXGICkkqUNbNVVGlQjyQVmsj_800.jpeg",
                name: "33.jpg"
              }
              ])
            },
            //显示文件不在json里面
            fileNoJson:JSON.stringify([{
              name: "111.ppt",
              "url": "http://common.hc-info.cn/storage/file/yCVZUAXwKjEef2639t1g5IczDBFmoI3s5qA7WnPv.ppt"
            }, {
              "name": "112112.xls",
              "url": "http://common.hc-info.cn/storage/file/FBhXGpWbTAqcpCoQjSiAgIAKKOvg5zgls1wSMpq7.xls"
            }]),
            //显示文件在json里面
            fileJson:{
              name:JSON.stringify([{
                name: "111.ppt",
                "url": "http://common.hc-info.cn/storage/file/yCVZUAXwKjEef2639t1g5IczDBFmoI3s5qA7WnPv.ppt"
              }, {
                "name": "112.xls",
                "url": "http://common.hc-info.cn/storage/file/FBhXGpWbTAqcpCoQjSiAgIAKKOvg5zgls1wSMpq7.xls"
              }])
            },
            //显示时间戳不在json里面
            timeStampNOJson:'1627959191',
            //显示时间戳在json里面
            timeStampJson:{name:'1627959191'},
            aa: '',//自定义组件
            status: '1',//状态
          }],
      },
    };
  },
  mounted() {
  },
  methods: {
    //table 分页
    pageCurrentClick(page) {
      console.log(page)
    }
  },
};
</script>

<style lang="scss" scoped></style>
